<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>

    <link rel="stylesheet" href="../../layout/base/base.css">
    <link rel="stylesheet" href="../../../../src/css/common/icon.css">

    <link rel="stylesheet" href="../../layout/button/layout.css">
    <link rel="stylesheet" href="../select/com-select.css">
    <link rel="stylesheet" href="../radio/com-radio.css">
    <link rel="stylesheet" href="../check/com-check.css">
    <link rel="stylesheet" href="../../notice/message/com-message.css">
    <style>
        .demo{
            width:800px;
            min-height: 400px;
            margin:0 auto;
            padding:10px;
            border: 1px solid #ebebeb;
        }
        .form{width:450px;}


        .com-radio,.com-check{
            padding:5px 0;
        }

        .sub{
            margin-top:100px;
            padding:8px 30px;
            background-color: #14a3a4;
            border-radius: 5px;
            color:#fff;
        }

    </style>
</head>
<body>

<div class="demo clearfix feat-grid feat-reset">

    <!--form-->
    <form id="form" class="form mt50" method="post" action="http://127.0.0.1">

        <div class="form-item row">
            <label class="form-title must col-sm-5">姓名：</label>
            <div class="form-content col-sm-15">
                <input name="name" class="form-input" type="text">
            </div>
        </div>

        <div class="form-item row">
            <label class="form-title col-sm-5">年龄：</label>
            <div class="form-content col-sm-15">
                <input name="age" class="form-input" type="text">
            </div>
        </div>

        <div class="form-item row">
            <label class="form-title col-sm-5">性别：</label>
            <!-- component -->
            <div class="form-content col-sm-15">
                <section data-name="comRadio" id="radio-1" class="com-radio">
                    <label class="box-add">
                        <input name="sex" type="radio" value="男">
                        <span data-name="radioBox" class="radio-box"></span>
                        <span>男</span>
                    </label>

                    <label class="ml10">
                        <input name="sex" type="radio" value="女">
                        <span data-name="radioBox" class="radio-box"></span>
                        <span>女</span>
                    </label>
                </section>
            </div>
        </div>

        <div class="form-item row">
            <label class="form-title col-sm-5">喜欢：</label>
            <div class="form-content col-sm-15">
                <section data-name="com-check" class="com-check">
                    <label data-name="checkAll">
                        <i data-name="allStyle" class="check-box"></i>
                        <span>全选</span>
                    </label>

                    <label class="ml15">
                        <i data-name="checkStyle" class="check-box"></i>
                        <span>小李</span>
                        <input name="like" type="checkbox" value="小李">
                    </label>

                    <label>
                        <i data-name="checkStyle" class="check-box"></i>
                        <span>小红</span>
                        <input name="like" type="checkbox" value="小红">
                    </label>
                </section>
            </div>
        </div>

        <div class="form-item row">
            <label class="form-title col-sm-5">兴趣：</label>
            <div class="form-content col-sm-15">
                <!-- component -->
                <section class="com-select com-reset">
                    <label class="sel-item">
                        <input class="sel-head" type="text" readonly UNSELECTABLE="on" placeholder="请选择"/>
                        <input name="interest" type="hidden">
                        <i class="sel-icon"></i>
                    </label>
                    <ul class="sel-content">
                        <li data-val="1" class="sel-list">篮球</li>
                        <li data-val="2" class="sel-list">足球</li>
                        <li data-val="3" class="sel-list">羽毛球</li>
                    </ul>
                </section>
            </div>
        </div>

        <div class="form-item row">
            <label class="form-title col-sm-5">留言：</label>
            <div class="form-content col-sm-15">
                <textarea class="form-textarea" rows="2" cols="2" name="message"></textarea>
            </div>
        </div>

        <button type="submit" class="com-btn com-btn-primary">提交</button>
    </form>

<button type="button" id="wrapBtn" class="com-btn com-btn-primary">提交</button>
</div>


<script src="../../lib/jquery.js"></script>
<script src="../select/com-select.js"></script>
<script src="../radio/com-radio.js"></script>
<script src="../check/com-check.js"></script>

<script src="../../notice/message/com-message.js"></script>

<script src="../../lib/jquery.validate.min.js"></script>
<script>

    //实例化组件
    $('.com-select').comSelect();
    $('.com-radio').comRadio();
    $('.com-check').comCheck();

    $(function(){
        var a = $("#form");
        a.validate({
            //ignore设置为空则校验hidden
            //ignore: "",
            /*errorPlacement:function(error,element) {//并且改变插入error位置
                element.closest("label").closest("section").after(error);
            },*/
            rules: {
                name:{required:true},
                age:{required:true},
                sex:{required:true},
                like:{required:true},
                interest:{required:true},
                message:{required:true}
            },
            messages: {
                name:{required:'请填写您的称呼'},
                age:{required:'请输入年龄'},
                sex:{required:'请选择性别'},
                like:{required:'请选择喜欢水果'},
                interest:{required:'请选择爱好'},
                message:{required:'请填写简介信息'}
            },
            submitHandler: function(form) {
                /**
                 **@param form为原生dom
                 **@valid 动态执行校验
                 **/
                //$(form).submit();
                //form.submit();
                console.log(form)
            }
        });

        $("#wrapBtn").on('click',function(){
            console.log($("#form").valid)
        })

    })


</script>
</body>
</html>